<template>
  <div class="quick-wrapper">
    <div class="quick-title">
      {{ $t('quickCreate.title') }}
    </div>
    <div class="quick-img-wrapper">
      <img
        src="@/project/authSys/assets/images/quickCreate/quickCenter.png"
        alt=""
        class="quick-img"
      />
    </div>
    <div class="quick-sub-img-wrapper">
      <div>
        <div class="quick-sub-content dot-1x-wl">
          <div class="quick-desc" @click="onGoto('device')">
            <h3 class="quick-desc-title">
              <span class="quick-no">1</span>
              <span class="quick-txt">
                {{ $t('quickCreate.addDevice') }}
              </span>
              <icon-font type="ic-rise"></icon-font>
            </h3>
            <div>{{ $t('quickCreate.dot1xWiredTip') }}</div>
          </div>
          <img
            src="@/project/authSys/assets/images/quickCreate/quickDev.png"
            alt=""
            class="quick-sub-img dot-1x-wl"
          />
        </div>
      </div>
      <div>
        <div class="quick-sub-content portal">
          <div class="quick-desc" @click="onGoto('account')">
            <h3 class="quick-desc-title">
              <span class="quick-no">2</span>
              <span class="quick-txt">
                {{ $t('quickCreate.source') }}
              </span>
              <icon-font type="ic-rise"></icon-font>
            </h3>
            <div>{{ $t('quickCreate.step2Soucrce') }}</div>
          </div>
          <img
            src="@/project/authSys/assets/images/quickCreate/quickSource.png"
            alt=""
            class="quick-sub-img"
          />
        </div>
      </div>
      <div>
        <div class="quick-sub-content mab">
          <div class="quick-desc" @click="onGoto('rule')">
            <h3 class="quick-desc-title">
              <span class="quick-no">3</span>
              <span class="quick-txt">
                {{ $t('quickCreate.rule') }}
              </span>
              <icon-font type="ic-rise"></icon-font>
            </h3>
            <div>{{ $t('quickCreate.ruleTip') }}</div>
          </div>
          <img
            src="@/project/authSys/assets/images/quickCreate/quickRule.png"
            alt=""
            class="quick-sub-img mab"
          />
        </div>
      </div>
    </div>
    <dot1xWiredCreator ref="dot1xWiredCreatorRef" />
    <portalAuthCreator ref="portalAuthEditorRef" />
  </div>
</template>
<script>
import { maccApi } from '@utils/index';
import portalAuthCreator from './portalAuthCreator';
import dot1xWiredCreator from './dot1xWiredCreator';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
export default {
  name: 'quickCreate',
  mixins: [authSysMixin],
  components: {
    portalAuthCreator,
    dot1xWiredCreator,
  },
  data() {
    return {
      isGuideVisible: false,
    };
  },
  mounted() {
    this.getAuthDeviceGroupList();
    this.get3rdSourceList();
    this.getTwillioInfo();
  },
  computed: {},
  methods: {
    async getTwillioInfo() {
      let res = await this.requestHttpAuth({
        api: maccApi.MACC_BAAS_GET_API,
        replaces: {
          tenantName: this.tenantInfo.tenantName,
        },
        querys: {
          tenantId: this.tenantInfo.tenantId,
        },
        method: 'GET',
      });
      if (!res.data.success) {
        const tempForm = {};
        tempForm.sid = res.data.smsSid;
        tempForm.authToken = res.data.smsToken;
        tempForm.authPhone = res.data.smsFromPhoneNumber;
        this.$store.commit('PortalAuth/SET_TWILLIO', tempForm);
      } else {
        this.$message.warning(res.data.message);
      }
    },
    onGoto(target) {
      switch (target) {
        case 'device':
          this.$router.push('authConf_authDevice_menu');
          break;
        case 'rule':
          this.$router.push('authConf_ruleList_menu');
          break;
        case 'account':
          this.$router.push('authConf_localAccount_menu');
          break;
        case 'voucher':
          this.$router.push('authConf_authVoucher_menu');
          break;
        case 'mac':
          this.$router.push('authConf_authMac_menu');
          break;
        case 'userSource':
          this.$router.push('authConf_thirdPart_menu');
          break;
        case '3rdPart':
          this.$router.push('authConf_thirdPart_menu');
          break;
        case 'quickCreate':
        default:
          this.isGuideVisible = false;
          this.$router.push('authConf_quickCreate_menu');
      }
    },
    onAddPortal() {
      this.$refs.portalAuthEditorRef.openEditor();
    },
    onAddDot1xWired() {
      this.$refs.dot1xWiredCreatorRef.openEditor();
    },
    onAddMab() {
      this.$message.info(this.$t('common.developingTip'));
    },
    async getAuthDeviceGroupList() {
      const res = await this.requestHttpAuth({
        api: maccApi.PRIVATE_DEVICE_GROUP_GET_API,
        method: 'GET',
        querys: {
          groupId: this.groupId,
          page: 1,
          size: 100,
        },
      });

      if (res.data.success) {
        this.$store.commit(
          'AuthCommon/SET_DEVICE_GROUP_LIST',
          res.data.result.items
        );
      } else {
        this.$message.warning(res.data.message);
      }
    },

    // 查询数据
    async get3rdSourceList() {
      const res = await this.requestHttpAuth({
        api: maccApi.MACC_SOURCE_GET_API,
        replaces: {
          tenantName: this.tenantInfo.tenantName,
          groupId: this.groupId,
        },
        querys: {
          tenantId: this.tenantInfo.tenantId,
          page: 1,
          pageSize: 100,
        },
        method: 'GET',
      });

      if (res.data.success) {
        this.thirdParts = res?.data?.result?.items || [];
        this.$store.commit('AuthCommon/SET_3RD_SOURCE_LIST', this.thirdParts);
      } else {
        this.$message.warning(res.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.quick-no {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: @theme-color;
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 20px;
  border-radius: 2px;
  font-size: 14px;
  margin-right: 4px;
  margin-top: 2px;
}
.quick-txt {
  text-align: left;
  flex: 1;
  padding-left: 4px;
}
.quick-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #e0e9ff 74.5%, #dae4ff 99.5%);
  border-radius: 12px;
  flex-direction: column;
}
.quick-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 44.8px;
  text-align: center;
  margin-bottom: 40px;
  margin-top: -5%;
}
.quick-img-wrapper {
  height: 200px;
}
.quick-sub-img-wrapper {
  width: 80%;
  display: flex;
  justify-content: center;
  max-width: 1400px;
  position: relative;
  > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.quick-img {
  // width: 340px;
  opacity: 0.2;
  position: absolute;
  width: 400px;
  margin-left: -200px;
}
.quick-sub-content {
  &.dot-1x-wl {
    position: absolute;
    top: -20%;
    .quick-desc {
      margin-left: -10%;
    }
  }
  &.mab {
    position: absolute;
    top: -20%;
    .quick-desc {
      margin-left: 10%;
    }
  }
  &:hover {
    .quick-sub-img {
      transform: scale(1.2);
    }
    .quick-desc-title {
      color: @theme-color;
    }
  }
}
.quick-desc {
  cursor: pointer;
  background: #fff;
  padding: 16px;
  width: 300px;
  text-align: left;
  border-radius: 12px;
  margin-bottom: 32px;
  box-shadow: 0px 4px 10px 0px #00000026;
  a {
    text-decoration: underline;
    color: #2c3e50;
    &:hover {
      color: @theme-color;
    }
  }
  .quick-desc-title {
    font-size: 16px;
    color: #595959;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    i {
      font-size: 20px;
      transform: rotate(90deg);
      font-weight: 400;
      color: @theme-color;
      margin-top: 2px;
    }
  }
}
.quick-sub-img {
  width: 180px;
  transition: transform 0.3s ease;
}
.guide-item {
  margin-top: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  padding: 12px 0;
  align-items: center;
}
.guide-item-title {
  font-size: 16px;
}
.guide-icon {
  position: absolute;
  bottom: 10%;
  right: 2%;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  font-size: 36px;
  background: @theme-color;
  line-height: 80px;
  color: #fff;
}
.guide-item-content {
  flex: 1;
}
.right-icon {
  cursor: pointer;
  background: @component-stroke;
  color: @text-primary;
  height: 18px;
  width: 18px;
  line-height: 18px;
  border-radius: 9px;
  font-weight: 400;
  text-align: center;
  font-size: 14px;
}
</style>
<style lang="less">
.guide-popover {
  .ant-popover-inner {
    border-radius: 12px;
    width: 320px;
  }
  .ant-popover-title {
    padding: 24px 24px 0;
    border-bottom: 0;
    font-size: 16px;
  }
  .ant-popover-inner-content {
    padding: 0 24px 24px;
  }
  .ant-popover-arrow {
    display: none;
  }
}
</style>
